import { Tabs, TabItem } from '@aws-amplify/ui-react';
import { Fragment } from '@/components/Fragment';

There are three methods to setup the Amazon Cognito resources needed for Amplify Auth. The most common is the Amplify CLI create flow which asks a series of questions and will configure both a User Pool and Identity Pool automatically. The second option is the Amplify CLI import flow which adds an existing Cognito resource into Amplify. Finally the third is to reuse or create a Cognito Identity Pool manually and to add it into your application.

<Fragment>
  {({}) => import(`./cognito-callout.mdx`)}
</Fragment>

<Tabs>
  <TabItem title="Amplify CLI">
> Use the Amplify CLI to automatically configure and manage your Cognito Identity and User Pool for you.

FaceLivenessDetector uses Amplify Auth by default to authorize users to perform the Face Liveness check. If you are using Amplify for the first time, follow the instructions for [installing the Amplify CLI](https://docs.amplify.aws/cli/start/install/).

#### Set up a new Amplify project

```bash
$ amplify init
? Enter a name for the project reactliveness
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start
```

<Fragment>
  {({ platform }) => import(`./quick-start-pull-cli.mdx`)}
</Fragment>

#### Push to create the resources

```bash
$ amplify push
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name    | Operation | Provider plugin   |
| -------- | ---------------- | --------- | ----------------- |
| Auth     | reactlive••••••• | Create    | awscloudformation | 
```

_If you have an existing Amplify backend, run `amplify pull` to sync your `aws-exports.js` with your cloud backend._

Once complete you should now have an `aws-exports.js` file in your `src` directory with your latest Amplify backend configuration.
  </TabItem>
    <TabItem title="Amplify CLI Import">
> If you previously had unmanaged resources that you want to manage with Amplify you can use the CLI to import your Cognito resources.

FaceLivenessDetector uses Amplify Auth by default to authorize users to perform the Face Liveness check. Follow the instructions for [Amplify CLI (Import)](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#set-up-backend-resources) to manage your Cognito resources with Amplify.

Once complete you should now have an `aws-exports.js` file in your `src` directory with your latest Amplify backend configuration.
  </TabItem>
  <TabItem title="Self Managed Cognito Resource">
> Use this option if you already have a Cognito identity/user pools that you do not want to import to Amplify, or want to manage Cognito resources yourself or with a 3rd party resource management tool.

If you already have Cognito set up or do not want to use the Amplify CLI to generate Cognito resources, you can follow the documentation in the [existing resources tab](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#set-up-backend-resources) or check out the code snippet below.

_If you are manually setting up an identity pool in the Cognito console you can follow [this guide](https://docs.aws.amazon.com/cognito/latest/developerguide/getting-started-with-identity-pools.html#create-identity-pool). When setting up the identity pool ensure that access to unauthenticated identities is enabled._

When initially configuring Amplify you can pass in the cognito region and an identity pool instead of using the Amplify generated aws-exports file.

```jsx
import React from 'react';
import { ThemeProvider } from '@aws-amplify/ui-react';
import { Amplify } from 'aws-amplify';
import '@aws-amplify/ui-react/styles.css';
import awsexports from './aws-exports';

Amplify.configure({
   ...awsexports,
  "aws_cognito_region": "us-east-2", // (required) - Region where Amazon Cognito project was created
  "aws_cognito_identity_pool_id": "us-east-2:xxx-xxx-xxx-xxx-xxx", // (required) - the pool region should match the cognito region
});

export default function App() {
  return (
    <ThemeProvider>
    </ThemeProvider>
  );
}
```
  </TabItem>
  <TabItem title="Custom Credentials Provider">
> Use this option if you want more control over the process of obtaining AWS credentials.

By default, FaceLivenessDetector uses Amplify Auth to authorize users to perform the Face Liveness check. You can use your own credentials provider to retrieve credentials from [Amazon Cognito](https://aws.amazon.com/cognito/) or assume a role with [Amazon STS](https://docs.aws.amazon.com/STS/latest/APIReference/API_AssumeRole.html), for example:

```jsx
import { FaceLivenessDetectorCore, AwsCredentialProvider } from '@aws-amplify/ui-react-liveness';
 
const credentialProvider: AwsCredentialProvider = async () => {
  // Fetch the credentials
}

return (
  <FaceLivenessDetectorCore
    sessionId={'<sessionId>'}
    region={'<region>'}
    onAnalysisComplete={() => {}}
    onError={onError}
    config={{ credentialProvider }}
  />
);
```

<Fragment>
  {({}) => import(`./credentials-provider-callout.mdx`)}
</Fragment>
  </TabItem>
</Tabs>

<Fragment>
  {({ platform }) => import(`./quick-start-add.${platform}.mdx`)}
</Fragment>